import React, { Component } from 'react';
import { Text, Image, View, TextInput, TouchableOpacity, ScrollView } from 'react-native';
import { unitWidth } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_member_info_Certification, api_member_info_companyRealname } from '../constants/HttpServices';
import { SubmitButton1 } from '../components/Button';
import { MyInput1 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import { ChooseSingleImageItem } from '../components/Item';
import { LoadingAndPorgressModal } from '../components/Modal';
import { uploadFile } from '../constants/UpLoadHelper';
import { ExamineView } from '../components/EmptyView';

export default class EnterpriseRealNameCertificationScreen extends Component {

    constructor(props) {
        super(props)

        const { navigation } = this.props;
        this.state = {
            merchname: '',//企业名称
            business_license: '',//营业执照
            public_account: '',//对公账号
            account_opening_area: '',//开户地区
            head_office: '111',//开户总行
            branch: '',//开户支行
            address: '',//详细地址
            mobile: '',//联系电话

            ImageList: [],
            progress: '0%',

            showExamineView: global.companyInfo && global.companyInfo.realname_info ? true : false
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    };

    render() {
        if (this.state.showExamineView) {
            let view;
            if (global.companyInfo.realname_info.is_pass == '0') {
                view = <ExamineView showRecertification={false} onPress={() => { }} reason='正在审核' />
            } else if (global.companyInfo.realname_info.is_pass == '1') {
                view = <ExamineView showRecertification={false} onPress={() => { }} reason='审核通过' />
            } else if (global.companyInfo.realname_info.is_pass == '2') {
                view = <ExamineView showRecertification={true} onPress={() => { this.setState({ showExamineView: false }) }} reason={'审核不通过原因：' + global.companyInfo.realname_info.remark} />
            }
            return (
                <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                    <MyHeader title='实名认证' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                    {view}
                </View>
            );
        }
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                <MyHeader title='实名认证' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View>
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onMerchnameTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>企业名称：</Text>
                            }
                            maxLength={20}
                            placeholder='请输入姓名'
                            value={this.state.merchname} isLast={false} />
                        <ChooseSingleImageItem
                            title='营业执照'
                            onChooseSuccess={(selectedPhotos) => {
                                this.setState({
                                    ImageList: selectedPhotos,
                                })
                            }} />
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onPublicAccountTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>企业对公账号：</Text>
                            }
                            maxLength={20}
                            placeholder='请输入企业对公账号'
                            value={this.state.public_account} isLast={false} />
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onAccountOpeningAreaTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>开户地区：</Text>
                            }
                            maxLength={50}
                            placeholder='请输入开户地区'
                            value={this.state.account_opening_area} isLast={false} />
                        {/* <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onHeadOfficeTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>开户总行：</Text>
                            }
                            maxLength={50}
                            placeholder='请输入正确的开户行全称'
                            value={this.state.head_office} isLast={false} /> */}
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onBranchTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>开户支行：</Text>
                            }
                            maxLength={50}
                            placeholder='请输入正确的开户支行全称'
                            value={this.state.branch} isLast={false} />
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onAddressTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>详细地址：</Text>
                            }
                            maxLength={50}
                            placeholder='请输入详细地址'
                            value={this.state.address} isLast={false} />
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onMobileTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>联系电话：</Text>
                            }
                            maxLength={11}
                            keyboardType='numeric'
                            placeholder='请输入联系电话'
                            value={this.state.mobile} isLast={true} />
                        <SubmitButton1 style={{ marginVertical: 38 * unitWidth, alignSelf: 'center' }} text='提交认证' onPress={() => {
                            this.doUpload();
                        }} />
                    </View>
                </ScrollView>
                <LoadingAndPorgressModal ref='LoadingAndPorgressModal' progress={this.state.progress} />
            </View>
        );
    }

    onMerchnameTextChange(text) {
        this.setState({
            merchname: text
        })
    }

    onPublicAccountTextChange(text) {
        this.setState({
            public_account: text,
        })
    }

    onAccountOpeningAreaTextChange(text) {
        this.setState({
            account_opening_area: text
        })
    }

    onHeadOfficeTextChange(text) {
        this.setState({
            head_office: text,
        })
    }

    onBranchTextChange(text) {
        this.setState({
            branch: text,
        })
    }

    onAddressTextChange(text) {
        this.setState({
            address: text
        })
    }

    onMobileTextChange(text) {
        this.setState({
            mobile: text,
        })
    }

    doUpload() {
        if (this.state.merchname == '') {
            show('请输入姓名');
            return;
        } else if (this.state.public_account == '') {
            show('请输入企业对公账号');
            return;
        } else if (this.state.account_opening_area == '') {
            show('请输入开户地区');
            return;
        } 
        // else if (this.state.head_office == '') {
        //     show('请输入正确的开户行全称');
        //     return;
        // } 
        else if (this.state.branch == '') {
            show('请输入正确的开户支行全称');
            return;
        } else if (this.state.address == '') {
            show('请输入详细地址');
            return;
        } else if (this.state.mobile == '') {
            show('请输入联系电话');
            return;
        }
        if (this.state.ImageList && this.state.ImageList.length > 0) {
            this.refs.LoadingAndPorgressModal.showModal();
            uploadFile(this.state.ImageList, (text) => {
                this.setState({
                    progress: text
                })
            }, {
                success: (response) => {
                    this.refs.LoadingAndPorgressModal.hideModal();
                    this.setState({
                        business_license: response.files[0].url
                    }, () => {
                        this.submit();
                    })
                },
                fail: (response) => {
                    this.refs.LoadingAndPorgressModal.hideModal();
                    show('上传失败')
                }
            })
        } else {
            show('请选择营业执照');
            return;
        }
    }

    submit() {
        let params = {
            merchname: this.state.merchname,
            business_license: this.state.business_license,
            public_account: this.state.public_account,
            account_opening_area: this.state.account_opening_area,
            head_office: this.state.head_office,
            branch: this.state.branch,
            address: this.state.address,
            mobile: this.state.mobile,
        }
        postFetch(api_member_info_companyRealname, params, {
            success: (response) => {
                show('上传成功');
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}